<template>
  <div>
    <div class="containers">
      <div>
        <a-button type="primary" @click="saveDiagram">保存</a-button>
      </div>
      <div class="canvas" ref="canvas"></div>
      <div id="js-properties-panel" class="panel"></div>
    </div>

    <a-modal v-model:open="open" title="保存流程定义信息">
      <a-form ref="formRef" :model="form"  :label-col="{ span: 5 }" >
        <a-form-item label="流程模型的名称"  name="name">
          <a-input style="width: 100%" v-model:value="form.name" placeholder="流程模型的名称" />
        </a-form-item>
        <a-form-item label="流程模型的标识符"  name="id">
          <a-input style="width: 100%" v-model:value="form.modelKey" placeholder="流程模型的标识符" />
        </a-form-item>
      </a-form>


      <template #footer>
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>
<script>
  // 引入相关的依赖
  import BpmnModeler from 'bpmn-js/lib/Modeler';
  import { xmlStr } from '/src/mock/xmlStr.js';
  import { ref } from 'vue';

  // 这里引入的是右侧属性栏这个框
  import propertiesPanelModule from 'bpmn-js-properties-panel';
  // 而这个引入的是右侧属性栏里的内容
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
  // 一个描述的json
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

  // 引入语言转换器
  import customTranslate from '/@/utils/customerTranslator.js';
  import { SmartLoading } from '/@/components/framework/smart-loading/index.js';
  import { flwDeModelApi } from '/@/api/business/flow/flw-de-model-api.js';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry.js';

  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'flow1',
    components: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      this.init();
    },
    data() {
      return {
        // bpmn建模器
        bpmnModeler: null,
        container: null,
        canvas: null,
        // 空值弹窗显示
        open :false,
        form:{
          id:'',
          name:'',
          modelKey:'',
          modelXml:'',
        }
      };
    },
    // 方法集合
    methods: {
      init() {
        // 获取到属性ref为“canvas”的dom节点
        const canvas = this.$refs.canvas;
        // 汉化
        const customTranslateModule = {
          translate: ['value', customTranslate],
        };
        // 建模
        this.bpmnModeler = new BpmnModeler({
          container: canvas,
          //添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel',
          },
          additionalModules: [propertiesPanelModule, propertiesProviderModule, customTranslateModule],
          moddleExtensions: {
            //如果要在属性面板中维护camunda：XXX属性，则需要此
            camunda: camundaModdleDescriptor,
          },
        });
        this.createNewDiagram();
      },
      createNewDiagram() {
        // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(xmlStr, (err) => {
          if (err) {
            // console.error(err)
          } else {
            // 这里是成功之后的回调, 可以在这里做一系列事情
            this.success();
          }
        });
      },
      success() {
        // console.log('创建成功!')
      },
      saveDiagram() {
        this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
          console.log(xml);
          this.open = true;
        });
      },
      onClose() {
        this.open= false;
      },
      // 新建、编辑API
      save() {
        SmartLoading.show();
        this.bpmnModeler.saveXML({ format: true }, async (err, xml) => {
          try {
            if (err) throw new Error('XML 导出失败：' + err.message);
            this.form.modelXml = xml;
            // 调用接口（建议用 async/await 优化异步）
            await flwDeModelApi.add(this.form);
            message.success('流程模型保存成功');
            this.onClose(); // 保存成功后关闭弹窗
          } catch (err) {
            smartSentry.captureError(err);
            message.error('保存失败：' + err.message);
          } finally {
            SmartLoading.hide();
          }
        });
      },
      // 点击确定，验证表单
      onSubmit() {
        try {
          this.save();
        } catch (err) {
          message.error('参数验证错误，请仔细填写表单数据!');
        }
      }
    },
    // 计算属性
    computed: {}
  };
</script>

<style scoped>
  .containers {
    background-color: #ffffff;
    width: 100%;
    height: calc(100vh - 52px);
  }

  .canvas {
    width: 100%;
    height: 100%;
  }

  .panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
</style>
